<template>
  <div>
    <!-- <van-nav-bar :title="indexTitle" left-arrow fixed :border="false" @click-left="$common.backButtonClicked('message')"></van-nav-bar> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="nav-container">
      <!-- 显示会议消息 -->
      <template v-if="titleType == 1">
        <div class="meet_box" v-for="(item,index) in meetingList" :key="index" @click="toMeetDetail(item)">
          <div class="meet_header">
            <div class="title">
              <img src="../../assets/notification/meeting.png" alt="meeting">
              <template v-if="item.type == 1">
                <span>会议邀请提醒</span>
              </template>
              <template v-if="item.type == 2">
                <span>会议室预约成功</span>
              </template>
              <template v-if="item.type == 3">
                <span>取消会议室提醒</span>
              </template>
              <template v-if="item.type == 4">
                <span>会议即将开始提醒</span>
              </template>
              <template v-if="item.type == 5">
                <span>会议审批提醒</span>
              </template>
              <template v-if="item.type == 6">
                <span>会议邀请拒绝提醒</span>
              </template>
              <template v-if="item.type == 7">
                <span>会议邀请同意提醒</span>
              </template>
            </div>
            <span class="times align-right">{{item.date}}</span>
          </div>
          <div class="meet_content padding-l-34">
            <span>{{item.message}}</span>
          </div>
        </div>
      </template>
      
      <!-- 显示审批 -->
      <template v-if="titleType == 2">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="approvalOnLoad"
        >
          <div class="meet_box" v-for="(item,approvalIndex) in approvalList" :key="approvalIndex" @click="toProval(item, item.flow)">
            <div class="meet_header">
              <div class="title">
                <img src="../../assets/notification/examine.png" alt="examine">
                <span>{{item.typename}}</span>
              </div>
              <span class="times align-right">{{item.date}}</span>
            </div>
            <div class="meet_content padding-l-34">
              <span>{{item.title}}</span>
            </div>
          </div>
        </van-list>
      </template>

      <!-- 显示通知 -->
      <template v-if="titleType == 3">
        <div class="meet_box" v-for="(item, noticeIndex) in noticeList" :key="noticeIndex" @click="toDetail(item)">
          <div class="meet_header">
            <div class="title">
              <img src="../../assets/notification/notice.png" alt="notice">
              <span>通知</span>
            </div>
            <span class="times align-right">{{item.date}}</span>
          </div>
          <div class="meet_content padding-l-34">
            <span>{{item.subject}}</span>
          </div>
        </div>
      </template>

      <!-- 显示公告 -->
      <template v-if="titleType == 4">
        <div class="meet_box" v-for="(item, proIndex) in proclamationList" :key="proIndex" @click="toDetail(item)">
          <div class="meet_header">
            <div class="title">
              <img src="../../assets/notification/affiche.png" alt="affiche">
              <span>公告</span>
            </div>
            <span class="times align-right">{{item.date}}</span>
          </div>
          <div class="meet_content padding-l-34">
            <span>{{item.subject}}</span>
          </div>
        </div>
      </template>
    </div>
    </van-pull-refresh>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        indexTitle:'1',//会议1/审批2/通知3/公告4/
        titleType: '',//类型
        meetingList:[],//会议数据
        approvalList: [],//审批数据
        noticeList: [],//通知数据
        proclamationList: [],//公告数据
        isLoading: false,
        loading: false,
        finished: false,
        approvalPage: 1,
      }
    },
    activated() {
      this.indexTitle = '1',//会议1/审批2/通知3/公告4/
      this.titleType='',//类型
      this.meetingList=[],//会议数据
      this.approvalList=[],//审批数据
      this.noticeList=[],//通知数据
      this.proclamationList=[],//公告数据
      this.approvalPage = 1
      this.titleType = Number(this.$route.query.titleType)
      console.log(this.$route.query.titleType)
      switch(this.titleType){
        case 1:
          this.$bridge.callHandler('navTitle', {title: '会议列表'})
          this.getMeetingList()
          break;
        case 2:
          this.$bridge.callHandler('navTitle', {title: '审批列表'})
          this.getApprovalList(this.approvalPage, true)
          break;
        case 3:
          this.$bridge.callHandler('navTitle', {title: '通知列表'})
          this.getNoticeList()
          break;
        case 4:
          this.$bridge.callHandler('navTitle', {title: '公告列表'})
          this.getProclamationList()
          break;
        default:
          this.$bridge.callHandler('navTitle', {title: '参数错误'})
          break;
      }
    },
    methods: {
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 下拉刷新
       */
      onRefresh() {
        setTimeout(_ => {
          switch(this.titleType) {
            case 1: 
              this.getMeetingList();
              break;
            case 2:
              this.getApprovalList(this.approvalPage, true)
              break;
            case 3:
              this.getNoticeList()
              break;
            case 4:
              this.getProclamationList()
              break;
            default:
              break;
          }
          this.isLoading = false;
        },500)
      },
      /**
       * 上拉加载
       * @return {[type]} [description]
       */
      approvalOnLoad () {
        this.getApprovalList(this.approvalPage, false)
      },
      /**
       * 获取会议消息列表
       * @return {[type]} [description]
       */
      getMeetingList() {
        let config = {
          url: `${this.$common.basePath}message/notice.php`,
          method: "post",
          data: {
            type: 'meeting',
            user_id: this.$store.state.userId,
            do: 'list'
          }
        }
        this.$axios(config).then(res => {
          this.indexTitle = "会议列表"
          this.meetingList = res.data.data
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 获取审批列表
       * @return {[type]} [description]
       */
      getApprovalList(page,init) {
        this.loading = true
        if (init) {
          this[page] = 1
          this.finished = false
        }
        let config = {
          url: `${this.$common.basePath}workclass.php`,
          method: "post",
          data: {
            do: 'get_approval',
            user_id: this.$store.state.userId,
            page: this[page]++
          }
        }
        this.$axios(config).then(res => {
          this.indexTitle = "审批列表"
          this.approvalList = init? res.data.data : this.approvalList.concat(res.data.data)
          if (this.approvalList.length >= res.data.count) {
            this.finished = true
          }
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * 获取通知列表
       * @return {[type]} [description]
       */
      getNoticeList() {
        let config = {
          url: `${this.$common.basePath}message/notice.php`,
          method: "post",
          data: {
            type: 'notice',
            user_id: this.$store.state.userId,
            do: 'list'
          }
        }
        this.$axios(config).then(res => {
          this.indexTitle = "通知列表"
          this.noticeList = res.data.data
          console.log(this.noticeList)
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 获取公告列表
       * @return {[type]} [description]
       */
      getProclamationList() {
        let config = {
          url: `${this.$common.basePath}message/notice.php`,
          method: "post",
          data: {
            type: 'proclamation',
            user_id: this.$store.state.userId,
            do: 'list'
          }
        }
        this.$axios(config).then(res => {
          this.indexTitle = "公告列表"
          this.proclamationList = res.data.data
          console.log(this.proclamationList)
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 会议详情
       * @return {[type]} [description]
       */
      toMeetDetail(row){
        //type为1 进入会议邀请详情页
        if(row.type == 1){
          this.$router.push({name:"meetingDetail",query:{ id:row.meeting_id, from:'default' } })
        }else if(row.type == 5) {
          //type=5 为审批  进入会议管理的审批列表
          this.$router.push({name:'approvalMeeting'})
        }else{
          //其余的进会议室详情
          this.$router.push({ name:"detailInfo",query:{id:row.meeting_id, from:"default"} })
        }
      },
      /**
       * 点击详情
       */
      toDetail(row){
        if(this.titleType == 3){
          //当前为通知
          this.$router.push({name:"noticeDetail", query:{ id:row.id, type:'3'} })
        }
        else if(this.titleType == 4){
          //当前为公告
          this.$router.push({name:"noticeDetail", query:{ id:row.id, type:'4'} })
        }
        
      },
      /**
       * 审批点击详情
       */
      toProval(item, flow) {
        this.$router.push({ name:'approvalInfo', query:{workid: item.id, type: item.type, step: flow.flownum} })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .nav-container {
    min-height: calc(100vh - 20px);
  }
  .meet_box{
    margin: 10px 15px;
    width: calc(100vw - 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

  }
  .meet_header{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;

    img{
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    span{
      color: #333333;
      font-size: 17px;
    }
  }
  .times{
    color: #C4C4C4;
    font-size: 12px;
  }
  .meet_content{
    width: calc(100% - 34px);
    margin-top: 7px;
    padding-bottom: 13px;
    color: #666666;
    font-size: 14px;
    border-bottom: 1px solid #F5F5F5;
  }
  .notifition_box{
    margin: 10px 15px;
    width: calc(100vw - 60px);
    background-color: #999999;
    padding: 10px 15px;
  }
  .padding-l-34 {
    padding-left: 34px;
  }
</style>
